<template>
  <div class="login-container">
    <div class="login-content">
      <!-- 顶部Logo和标题区域（参考图片：左上角布局） -->
      <div class="header-section">
        <div class="logo-icon">
          <el-icon><Lock /></el-icon>
        </div>
        <div class="title-group">
          <h1 class="app-title">建筑安全管理系统</h1>
          <p class="app-subtitle">Construction Safety Management</p>
        </div>
      </div>

      <!-- 登录表单 -->
      <div class="form-section">
        <h2 class="form-title">Login</h2>
        <form class="login-form" @submit.prevent="handleLogin">
          <div class="form-item">
            <div class="input-wrapper">
              <el-icon class="input-icon"><User /></el-icon>
              <input
                v-model="loginForm.username"
                type="text"
                placeholder="请输入用户名"
                class="form-input"
                autocomplete="username"
                :disabled="loading"
              />
            </div>
          </div>
          
          <div class="form-item">
            <div class="input-wrapper">
              <el-icon class="input-icon"><Lock /></el-icon>
              <input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                class="form-input"
                autocomplete="current-password"
                :disabled="loading"
              />
            </div>
          </div>

          <div class="form-item">
            <button
              type="button"
              class="login-btn"
              :disabled="loading"
              :class="{ 'loading': loading }"
              @click="handleLoginClick"
            >
              <span v-if="loading">登录中...</span>
              <span v-else>登录</span>
            </button>
          </div>
        </form>

        <!-- 忘记密码链接（参考图片：浅灰色，略微凹陷） -->
        <div class="forgot-password" style="display: none;">
          <a href="#" class="forgot-link">忘记密码</a>
        </div>
      </div>
    </div>

    <!-- 拼图验证弹窗 -->
    <el-dialog
      v-model="puzzleDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :show-close="false"
      width="90%"
      max-width="400px"
      class="puzzle-dialog"
      @close="closePuzzleDialog"
    >
      <div class="puzzle-verify-container">
        <div class="puzzle-header">
          <h3>安全验证</h3>
          <p>请拖动拼图块到正确位置</p>
          <button class="puzzle-close-btn" @click="closePuzzleDialog">
            <el-icon><Close /></el-icon>
          </button>
        </div>
        
        <div class="puzzle-content" ref="puzzleContentRef">
          <!-- 拼图背景 -->
          <div class="puzzle-bg-wrapper" ref="puzzleBgRef">
            <img 
              :src="puzzleBgImg" 
              alt="拼图背景"
              class="puzzle-bg"
              @load="onBgImageLoad"
            />
            <!-- 缺口位置提示 -->
            <div 
              class="puzzle-gap"
              :style="{
                left: puzzleGapX + 'px',
                top: puzzleGapY + 'px',
                width: puzzlePieceSize + 'px',
                height: puzzlePieceSize + 'px'
              }"
            ></div>
          </div>
          
          <!-- 拼图块 -->
          <div 
            class="puzzle-piece"
            :style="{
              backgroundImage: `url(${puzzleBgImg})`,
              backgroundPosition: `-${puzzleGapX}px -${puzzleGapY}px`,
              backgroundSize: `${puzzleBgWidth}px ${puzzleBgHeight}px`,
              left: puzzlePieceX + 'px',
              top: puzzlePieceY + 'px',
              width: puzzlePieceSize + 'px',
              height: puzzlePieceSize + 'px'
            }"
            @mousedown="handlePieceMouseDown"
            @touchstart="handlePieceTouchStart"
          >
            <div class="puzzle-piece-shadow"></div>
          </div>
        </div>
        
        <div class="puzzle-footer">
          <button class="puzzle-refresh-btn" @click="refreshPuzzle">
            <el-icon><Refresh /></el-icon>
            <span>刷新</span>
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  User, 
  Lock, 
  Refresh,
  Close
} from '@element-plus/icons-vue'
import { login, getCodeImg, getInfo } from '@/api/login'
// 夜间模式已禁用
import { setToken, setUserInfo, setUserDetailInfo } from '@/utils/auth'

const router = useRouter()

// 表单数据
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  uuid: ''
})

// 拼图验证相关
const puzzleDialogVisible = ref(false)
const puzzleContentRef = ref(null)
const puzzleBgRef = ref(null)
const puzzleBgImg = ref('')
const puzzleBgWidth = ref(300)
const puzzleBgHeight = ref(150)
const puzzlePieceSize = ref(50) // 拼图块大小
const puzzleGapX = ref(0) // 缺口X坐标（相对于背景图片）
const puzzleGapY = ref(0) // 缺口Y坐标（相对于背景图片）
const puzzlePieceX = ref(0) // 拼图块当前X坐标（相对于puzzle-content）
const puzzlePieceY = ref(0) // 拼图块当前Y坐标（相对于puzzle-content）
const puzzlePieceStartX = ref(0) // 拖拽起始X
const puzzlePieceStartY = ref(0) // 拖拽起始Y
const isDraggingPiece = ref(false)
const puzzleVerified = ref(false)
const bgOffsetY = ref(0) // 背景图片相对于puzzle-content的Y偏移

const loading = ref(false)

// 生成拼图验证图片
const generatePuzzleImage = async () => {
  try {
    // 从网上获取随机图片作为拼图背景
    // 使用 Picsum (Lorem Picsum) 免费图片服务，提供随机图片
    const imageWidth = 300
    const imageHeight = 150
    const randomId = Math.floor(Math.random() * 1000) // 随机ID，获取不同图片
    const imageUrl = `https://picsum.photos/${imageWidth}/${imageHeight}?random=${randomId}&t=${Date.now()}`
    
    // 加载图片并转换为base64（避免跨域问题）
    const loadImageFromUrl = () => {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'anonymous' // 允许跨域
        
        img.onload = () => {
          try {
            // 创建canvas来转换图片为base64
            const canvas = document.createElement('canvas')
            canvas.width = imageWidth
            canvas.height = imageHeight
            const ctx = canvas.getContext('2d')
            ctx.drawImage(img, 0, 0, imageWidth, imageHeight)
            
            // 转换为base64
            const base64Image = canvas.toDataURL('image/jpeg', 0.8)
            resolve(base64Image)
          } catch (error) {
            console.error('图片转换错误:', error)
            // 如果转换失败，直接使用URL
            resolve(imageUrl)
          }
        }
        
        img.onerror = () => {
          // 如果加载失败，尝试使用备用图片源
          console.warn('图片加载失败，尝试备用方案')
          const fallbackUrl = `https://source.unsplash.com/random/${imageWidth}x${imageHeight}?sig=${randomId}`
          resolve(fallbackUrl)
        }
        
        img.src = imageUrl
      })
    }
    
    // 加载图片
    puzzleBgImg.value = await loadImageFromUrl()
    puzzleVerified.value = false
    
    // 等待DOM更新后触发图片加载完成事件
    await new Promise(resolve => setTimeout(resolve, 100))
    if (puzzleBgRef.value) {
      const imgElement = puzzleBgRef.value.querySelector('img')
      if (imgElement && imgElement.complete) {
        onBgImageLoad()
      } else if (imgElement) {
        imgElement.onload = onBgImageLoad
      }
    }
    
    // 同时获取后端验证码的uuid（用于登录）
    try {
      const response = await getCodeImg()
      if (response.code === 200) {
        loginForm.uuid = response.uuid
      }
    } catch (error) {
      console.warn('获取后端验证码uuid失败:', error)
      // 生成一个临时uuid
      loginForm.uuid = 'puzzle_' + Date.now()
    }
  } catch (error) {
    console.error('获取验证图片错误:', error)
    ElMessage.error('获取验证图片失败，请重试')
  }
}

// 背景图片加载完成
const onBgImageLoad = () => {
  if (puzzleBgRef.value && puzzleContentRef.value) {
    const img = puzzleBgRef.value.querySelector('img')
    if (img) {
      // 获取实际图片尺寸
      puzzleBgWidth.value = img.offsetWidth || img.naturalWidth || 300
      puzzleBgHeight.value = img.offsetHeight || img.naturalHeight || 150
      
      // 获取背景图片相对于puzzle-content的偏移
      const bgRect = puzzleBgRef.value.getBoundingClientRect()
      const contentRect = puzzleContentRef.value.getBoundingClientRect()
      bgOffsetY.value = bgRect.top - contentRect.top
      
      // 确保缺口位置在可拖拽范围内（留出足够的边距）
      const minX = 10
      const maxX = puzzleBgWidth.value - puzzlePieceSize.value - 10
      const minY = 10
      const maxY = puzzleBgHeight.value - puzzlePieceSize.value - 10
      
      // 随机生成缺口位置（确保在有效范围内）
      puzzleGapX.value = Math.max(minX, Math.min(maxX, Math.random() * (maxX - minX) + minX))
      puzzleGapY.value = Math.max(minY, Math.min(maxY, Math.random() * (maxY - minY) + minY))
      
      // 初始化拼图块位置（在图片下方，X坐标与缺口对齐）
      puzzlePieceX.value = puzzleGapX.value
      puzzlePieceY.value = bgOffsetY.value + puzzleBgHeight.value + 20
    }
  }
}

// 刷新拼图
const refreshPuzzle = () => {
  generatePuzzleImage()
}

// 关闭拼图弹窗
const closePuzzleDialog = () => {
  puzzleDialogVisible.value = false
  puzzleVerified.value = false
  // 重置拼图块位置
  if (puzzleBgRef.value && puzzleContentRef.value) {
    puzzlePieceX.value = puzzleGapX.value
    puzzlePieceY.value = bgOffsetY.value + puzzleBgHeight.value + 20
  }
}

// 拼图块鼠标按下
const handlePieceMouseDown = (e) => {
  if (puzzleVerified.value) return
  e.preventDefault()
  e.stopPropagation()
  isDraggingPiece.value = true
  
  const contentRect = puzzleContentRef.value?.getBoundingClientRect()
  if (!contentRect) return
  
  // 记录鼠标相对于拼图块的偏移
  puzzlePieceStartX.value = e.clientX - contentRect.left - puzzlePieceX.value
  puzzlePieceStartY.value = e.clientY - contentRect.top - puzzlePieceY.value
  
  const handleMouseMove = (e) => {
    if (!isDraggingPiece.value) return
    e.preventDefault()
    
    const contentRect = puzzleContentRef.value?.getBoundingClientRect()
    if (!contentRect) return
    
    // 计算拼图块的新位置（相对于puzzle-content）
    let newX = e.clientX - contentRect.left - puzzlePieceStartX.value
    let newY = e.clientY - contentRect.top - puzzlePieceStartY.value
    
    // 限制在背景图片区域内（考虑背景图片的偏移）
    const minX = 0
    const maxX = puzzleBgWidth.value - puzzlePieceSize.value
    const minY = bgOffsetY.value
    const maxY = bgOffsetY.value + puzzleBgHeight.value - puzzlePieceSize.value
    
    puzzlePieceX.value = Math.max(minX, Math.min(maxX, newX))
    puzzlePieceY.value = Math.max(minY, Math.min(maxY, newY))
  }
  
  const handleMouseUp = () => {
    if (!isDraggingPiece.value) return
    isDraggingPiece.value = false
    
    // 验证位置（拼图块的Y坐标需要减去背景偏移）
    const pieceRelativeY = puzzlePieceY.value - bgOffsetY.value
    const diffX = Math.abs(puzzlePieceX.value - puzzleGapX.value)
    const diffY = Math.abs(pieceRelativeY - puzzleGapY.value)
    
    if (diffX <= 5 && diffY <= 5) {
      puzzleVerified.value = true
      // 对齐到正确位置
      puzzlePieceX.value = puzzleGapX.value
      puzzlePieceY.value = bgOffsetY.value + puzzleGapY.value
      
      // 延迟关闭弹窗并执行登录
      setTimeout(() => {
        puzzleDialogVisible.value = false
        executeLogin()
      }, 300)
    } else {
      ElMessage.warning('位置不正确，请重试')
      // 重置位置到图片下方
      puzzlePieceX.value = puzzleGapX.value
      puzzlePieceY.value = bgOffsetY.value + puzzleBgHeight.value + 20
    }
    
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }
  
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

// 拼图块触摸开始
const handlePieceTouchStart = (e) => {
  if (puzzleVerified.value) return
  e.preventDefault()
  e.stopPropagation()
  isDraggingPiece.value = true
  
  const touch = e.touches[0]
  const contentRect = puzzleContentRef.value?.getBoundingClientRect()
  if (!contentRect) return
  
  // 记录触摸点相对于拼图块的偏移
  puzzlePieceStartX.value = touch.clientX - contentRect.left - puzzlePieceX.value
  puzzlePieceStartY.value = touch.clientY - contentRect.top - puzzlePieceY.value
  
  const handleTouchMove = (e) => {
    if (!isDraggingPiece.value) return
    e.preventDefault()
    
    const touch = e.touches[0]
    const contentRect = puzzleContentRef.value?.getBoundingClientRect()
    if (!contentRect) return
    
    // 计算拼图块的新位置（相对于puzzle-content）
    let newX = touch.clientX - contentRect.left - puzzlePieceStartX.value
    let newY = touch.clientY - contentRect.top - puzzlePieceStartY.value
    
    // 限制在背景图片区域内
    const minX = 0
    const maxX = puzzleBgWidth.value - puzzlePieceSize.value
    const minY = bgOffsetY.value
    const maxY = bgOffsetY.value + puzzleBgHeight.value - puzzlePieceSize.value
    
    puzzlePieceX.value = Math.max(minX, Math.min(maxX, newX))
    puzzlePieceY.value = Math.max(minY, Math.min(maxY, newY))
  }
  
  const handleTouchEnd = () => {
    if (!isDraggingPiece.value) return
    isDraggingPiece.value = false
    
    // 验证位置（拼图块的Y坐标需要减去背景偏移）
    const pieceRelativeY = puzzlePieceY.value - bgOffsetY.value
    const diffX = Math.abs(puzzlePieceX.value - puzzleGapX.value)
    const diffY = Math.abs(pieceRelativeY - puzzleGapY.value)
    
    if (diffX <= 5 && diffY <= 5) {
      puzzleVerified.value = true
      puzzlePieceX.value = puzzleGapX.value
      puzzlePieceY.value = bgOffsetY.value + puzzleGapY.value
      
      setTimeout(() => {
        puzzleDialogVisible.value = false
        executeLogin()
      }, 300)
    } else {
      ElMessage.warning('位置不正确，请重试')
      // 重置位置到图片下方
      puzzlePieceX.value = puzzleGapX.value
      puzzlePieceY.value = bgOffsetY.value + puzzleBgHeight.value + 20
    }
    
    document.removeEventListener('touchmove', handleTouchMove)
    document.removeEventListener('touchend', handleTouchEnd)
  }
  
  document.addEventListener('touchmove', handleTouchMove, { passive: false })
  document.addEventListener('touchend', handleTouchEnd)
}

// 表单验证
const validateForm = () => {
  if (!loginForm.username.trim()) {
    ElMessage.warning('请输入用户名')
    return false
  }
  if (!loginForm.password.trim()) {
    ElMessage.warning('请输入密码')
    return false
  }
  return true
}

// 点击登录按钮
const handleLoginClick = () => {
  if (!validateForm()) return
  
  // 打开拼图验证弹窗
  puzzleDialogVisible.value = true
  generatePuzzleImage()
}

// 执行登录（拼图验证通过后调用）
const executeLogin = async () => {
  loading.value = true
  try {
    // 拼图验证通过后，发送后端白名单标识
    const response = await login(
      loginForm.username,
      loginForm.password,
      'ItIsClient', // 后端验证码白名单标识
      loginForm.uuid
    )
    
    if (response.code === 200) {
      // 保存token
      setToken(response.token)
      
      // 保存用户信息
      if (response.user) {
        setUserInfo(response.user)
      }
      
      // 获取用户详细信息
      try {
        const userInfoResponse = await getInfo()
        if (userInfoResponse.code === 200) {
          // 保存完整的用户信息
          setUserDetailInfo(userInfoResponse)
          
          // 保存用户头像
          if (userInfoResponse.user && userInfoResponse.user.avatar) {
            localStorage.setItem('userAvatar', userInfoResponse.user.avatar)
          }
        }
      } catch (infoError) {
        console.warn('获取用户详细信息失败:', infoError)
      }
      
      ElMessage.success('登录成功')
      router.push('/home')
    } else {
      ElMessage.error(response.msg || '登录失败')
      // 登录失败时刷新拼图
      refreshPuzzle()
    }
  } catch (error) {
    console.error('登录错误:', error)
    // 刷新拼图
    refreshPuzzle()
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  /* 使用透明背景，显示父元素的圆角效果 */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &.dark-mode {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #718096 100%);
    
    .login-content {
      background: rgba(26, 32, 44, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid #4a5568;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      
      .logo-section {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        border-bottom: 1px solid #4a5568;
      }
      
      .form-section {
        .login-form {
          .form-item {
            .input-wrapper {
              background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
              border: 1px solid #4a5568;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
              
              &:focus-within {
                border-color: #63b3ed;
                box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2);
              }
              
              .input-icon {
                color: #a0aec0;
              }
              
              .form-input {
                color: #e2e8f0;
                
                &::placeholder {
                  color: #a0aec0;
                }
                
                &:disabled {
                  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
                  color: #a0aec0;
                }
              }
            }
            
            .captcha-wrapper {
              .captcha-img {
                background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
                border: 1px solid #4a5568;
                
                &:hover {
                  border-color: #60a5fa;
                  transform: translateY(-2px);
                  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                }
                
                .captcha-placeholder {
                  color: #a0aec0;
                }
              }
            }
          }
          
          .slider-verify {
            .slider-track {
              background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
              border: 2px solid #4a5568;
              
              .slider-progress {
                background: linear-gradient(90deg, #48bb78, #68d391);
                
                &.verified {
                  background: linear-gradient(90deg, #48bb78, #68d391);
                }
              }
              
              .slider-thumb {
                background: linear-gradient(135deg, #718096 0%, #a0aec0 100%);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                
                .el-icon {
                  color: #a0aec0;
                }
                
                &.verified {
                  background: linear-gradient(135deg, #48bb78 0%, #68d391 100%);
                  
                  .el-icon {
                    color: white;
                  }
                }
              }
              
              .slider-text {
                color: #a0aec0;
              }
            }
          }
          
          .login-btn {
            background: linear-gradient(135deg, #63b3ed 0%, #4299e1 100%);
            
            &:not(:disabled):hover {
              background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            }
          }
        }
      }
      
      .footer-section {
        .footer-text {
          color: #a0aec0;
        }
      }
    }
  }
  
  .login-content {
    width: 100%;
    max-width: 420px;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 0 24px;
    
    /* 顶部Logo和标题区域（图标在左，文字在右，整体居中） */
    .header-section {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 40px;
      
      .logo-icon {
        width: 60px;
        height: 60px;
        /* 参考图片：白色圆形凸起图标，带细微灰色内细节 */
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.5),
                    -8px -8px 16px rgba(255, 255, 255, 1);
        
        .el-icon {
          font-size: 32px;
          color: #909399;
        }
      }
      
      .title-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        
        .app-title {
          color: #ffffff;
          font-size: 24px;
          font-weight: 600;
          margin: 0 0 4px;
          letter-spacing: 0.5px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        .app-subtitle {
          color: rgba(255, 255, 255, 0.9);
          font-size: 13px;
          margin: 0;
          letter-spacing: 1px;
          font-weight: 400;
          text-transform: uppercase;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
      }
    }
    
    .form-section {
      .form-title {
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 28px;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        text-align: left;
        padding-left: calc(7.5% + 28px);
      }
      
      .login-form {
        .form-item {
          margin-bottom: 20px;
          
          .input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            /* 参考图片：输入框白色背景，白色边框，高度为原来的2/3 */
            background: #ffffff;
            border-radius: 16px;
            border: 2px solid #ffffff;
            box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.3),
                        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
            max-width: 85%;
            width: 85%;
            margin: 0 auto;
            height: 44px;
            min-height: 44px;
            
            &:focus-within {
              border-color: #ffffff;
              box-shadow: inset 1px 1px 2px rgba(163, 177, 198, 0.2),
                          inset -1px -1px 2px rgba(255, 255, 255, 1);
            }
            
            .input-icon {
              padding: 0 16px;
              color: #606266;
              font-size: 20px;
              transition: color 0.3s ease;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
              width: auto;
            }
            
            .form-input {
              flex: 1;
              border: none;
              outline: none;
              padding: 10px 16px 10px 0;
              font-size: 15px;
              background: transparent;
              color: #303133;
              font-weight: 400;
              height: 100%;
              
              &::placeholder {
                color: #94a3b8;
                font-weight: 400;
              }
              
              &:disabled {
                color: #94a3b8;
                cursor: not-allowed;
              }
            }
          }
          
        }
        
        .login-btn {
          width: 85%;
          max-width: 85%;
          height: 44px;
          border-radius: 16px;
          font-size: 16px;
          font-weight: 600;
          /* 参考图片：登录按钮凸起效果，白色背景，与输入框高宽一致 */
          background: #ffffff;
          border: none;
          color: #303133;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.5),
                      -8px -8px 16px rgba(255, 255, 255, 1);
          margin: 0 auto;
          display: block;
          
          &:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
            box-shadow: none;
            color: #94a3b8;
          }
          
          &:not(:disabled):hover {
            box-shadow: 10px 10px 20px rgba(163, 177, 198, 0.6),
                        -10px -10px 20px rgba(255, 255, 255, 1);
          }
          
          &:not(:disabled):active {
            box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.4),
                        -6px -6px 12px rgba(255, 255, 255, 1);
          }
          
          &.loading {
            opacity: 0.8;
            cursor: not-allowed;
          }
        }
      }
      
      /* 忘记密码链接（更醒目） */
      .forgot-password {
        text-align: center;
        margin: 20px 0 0;
        
        .forgot-link {
          color: #409eff;
          font-size: 15px;
          font-weight: 500;
          text-decoration: none;
          transition: all 0.3s ease;
          
          &:hover {
            color: #66b1ff;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

// 动画效果
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

// 拼图验证弹窗样式
:deep(.puzzle-dialog) {
  .el-dialog {
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.5),
                -8px -8px 16px rgba(255, 255, 255, 1);
  }
  
  .el-dialog__header {
    display: none;
  }
  
  .el-dialog__body {
    padding: 0;
  }
}

.puzzle-verify-container {
  padding: 24px;
  
  .puzzle-header {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    
    h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
    
    p {
      margin: 0;
      font-size: 14px;
      color: #64748b;
    }
    
    .puzzle-close-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.3),
                  -2px -2px 4px rgba(255, 255, 255, 0.9);
      
      &:hover {
        color: #303133;
        box-shadow: 3px 3px 6px rgba(163, 177, 198, 0.4),
                    -3px -3px 6px rgba(255, 255, 255, 1);
      }
      
      &:active {
        box-shadow: 1px 1px 2px rgba(163, 177, 198, 0.2),
                    -1px -1px 2px rgba(255, 255, 255, 0.9);
      }
      
      .el-icon {
        font-size: 18px;
      }
    }
  }
  
  .puzzle-content {
    position: relative;
    margin-bottom: 20px;
    min-height: 200px;
    
    .puzzle-bg-wrapper {
      position: relative;
      width: 100%;
      height: 150px;
      border-radius: 16px;
      overflow: visible;
      background: #f8fafc;
      box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.3),
                  inset -2px -2px 4px rgba(255, 255, 255, 0.9);
      
      .puzzle-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      
      .puzzle-gap {
        position: absolute;
        border: 2px dashed rgba(163, 177, 198, 0.5);
        border-radius: 8px;
        background: rgba(248, 250, 252, 0.8);
        pointer-events: none;
        z-index: 1;
      }
    }
    
    .puzzle-piece {
      position: absolute;
      border-radius: 8px;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      z-index: 10;
      border: 2px solid rgba(163, 177, 198, 0.3);
      box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.4),
                  -4px -4px 8px rgba(255, 255, 255, 1);
      transition: box-shadow 0.2s ease;
      
      &:active {
        cursor: grabbing;
        box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.3),
                    -2px -2px 4px rgba(255, 255, 255, 0.9);
      }
      
      .puzzle-piece-shadow {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.1);
        pointer-events: none;
      }
    }
  }
  
  .puzzle-footer {
    display: flex;
    justify-content: center;
    
    .puzzle-refresh-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 12px;
      border: none;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.4),
                  -4px -4px 8px rgba(255, 255, 255, 1);
      
      &:hover {
        color: #303133;
        box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.5),
                    -6px -6px 12px rgba(255, 255, 255, 1);
      }
      
      &:active {
        box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.3),
                    -2px -2px 4px rgba(255, 255, 255, 0.9);
      }
      
      .el-icon {
        font-size: 16px;
      }
    }
  }
}

// 响应式设计（手机端优化）
@media (max-width: 480px) {
  .login-container {
    padding: 20px 16px;
    
    .login-content {
      padding: 0 20px;
      max-width: 100%;
      
      .header-section {
        margin-bottom: 32px;
        
        .logo-icon {
          width: 50px;
          height: 50px;
          
          .el-icon {
            font-size: 26px;
          }
        }
        
        .title-group {
          .app-title {
            font-size: 20px;
          }
          
          .app-subtitle {
            font-size: 11px;
          }
        }
      }
      
      .form-section {
        .form-title {
          font-size: 18px;
          margin-bottom: 24px;
        }
        
        .login-form {
          .form-item {
            margin-bottom: 16px;
            
            .input-wrapper {
              height: 44px;
              min-height: 44px;
              padding: 0;
            }
            
            .captcha-wrapper {
              flex-direction: column;
              gap: 12px;
              
              .captcha-img {
                width: 100%;
                height: 44px;
              }
            }
          }
        }
      }
    }
  }
}
</style> 